<!DOCTYPE html>
<html>

<head>
    <#include "/head-file.htm" />
</head>

<body>
    <#include "/head.htm" />
    <div class="ms-content" id="pa-change-vue">
        <div class="ms-content-main">
            <div class="ms-content-left">
                <div class="ms-content-left-info">
                        <el-upload class="avatar-uploader" action="{ms:global.host/}/file/upload.do" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    </el-upload>
                    <img :src="'{ms:global.host/}/'+peopleInfo.puIcon"
                        onerror='this.src="http://cdn.mingsoft.net/global/images/msheader.png"'>
                    <div style="display: none;" v-show="peopleInfo.puNickname!='' && peopleInfo.puNickname != undefined"
                        v-if="peopleInfo.puNickname!='' && peopleInfo.puNickname != undefined"
                        v-text="peopleInfo.puNickname"></div>
                    <div v-else v-text="'暂无昵称'"></div>
                </div>
                <div class="ms-content-left-list">
                    <div class="ms-content-left-list-info">
                        <a href="{ms:global.host/}/people/center.do">基本资料</a>
                    </div>
                    <div class="ms-content-left-list-pass">
                        <a class='active' href="{ms:global.host/}/people/password-change.do">修改密码</a>
                    </div>
                </div>
            </div>
            <div class="ms-content-right">
                <div class="ms-content-right-title">修改密码</div>
                <div class="ms-content-right-form" style="width: 60%;padding-top: 30px;">
                    <el-form :model="form" :rules="rules" ref="form" label-width="100px"
                        class="demo-form" status-icon style="margin-left: 15px;">
                        <el-form-item label="当前密码" prop="peopleOldPassword">
                            <el-input v-model="form.peopleOldPassword" placeholder="必填，6~20位字符" @blur="validate">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="peoplePassword">
                            <el-input v-model="form.peoplePassword" placeholder="必填，6~20位字符" @blur="validate">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="rePeoplePassword">
                            <el-input v-model="form.rePeoplePassword" placeholder="请再次输入新密码" @blur="validate">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="rand_code" style="position: relative;">
                            <el-input v-model="form.rand_code" placeholder="必填，4位字符" @blur="validate"></el-input>
                            <div id="code">
                                <img :src="codeSrc" class="login-code-img" @click="code" />
                                <div>
                                    <span>看不清?</span>
                                    <span class="img-code" @click="code" ref="imgCode">换一张</span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-button style="margin-left: 100px;" type="primary" @click="changePassword('form')"
                            :disabled="flag" v-text="submit">
                        </el-button>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <#include "/footer.htm" />
</body>

</html>
<script type="text/javascript">
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== V.form.peoplePassword) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    var V = new Vue({
        el: "#pa-change-vue",
        data: {
            // 用户信息
            peopleInfo:"",
            //提交信息
            form: {
                peopleOldPassword: "", //用户旧密码
                peoplePassword: "", //用户密码
                rePeoplePassword: "", //确认密码
                rand_code: ""
            },
            flag: true,
            submit: "确认",
            codeSrc:"{ms:global.host/}/code",
            rules: {
                peopleOldPassword: [{
                        required: true,
                        message: '请输入旧密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 20,
                        message: '密码长度在 6 到 20 个字符',
                        trigger: 'blur'

                    }
                ],
                peoplePassword: [{
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        max: 20,
                        message: '密码长度在 6 到 20 个字符',
                        trigger: 'blur'
                    }
                ],
                rePeoplePassword: [{
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur'
                    },
                    {
                        validator: validatePass2,
                        trigger: 'blur'
                    }
                ],
                rand_code: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    },
                    {
                        min: 4,
                        max: 4,
                        message: '输入验证码位数错误',
                        trigger: 'blur'
                    }
                ]
            },
        },
        methods: {
            test: function () {
                alert(1);
            },
            //更改验证码
            code: function () {
                this.codeSrc="{ms:global.host/}/code?t=" + (new Date).getTime();
            },
            //修改密码
            changePassword: function (formName) {
                this.submitForm(formName);
                var target = this;
                var params = {
                    peopleOldPassword: this.form.peopleOldPassword,
                    peoplePassword: this.form.peoplePassword,
                    rePeoplePassword: this.form.rePeoplePassword,
                    rand_code: this.form.rand_code
                }
                ms.people.changePassword(params, function (returnJson) {
                    if (returnJson.result) {
                        target.submit = "提交中..."
                        setTimeout(function () {                            
                            alert("密码修改成功，请重新登录")
                            http.post("{ms:global.host/}/people/quit.do")
                            location.href = "{ms:global.host/}/mcms/login.do";
                        }, 500)

                    } else if (returnJson.resultMsg == "密码错误!") {
                        alert('原密码错误！');
                        this.flag = true;
                    } else if (returnJson.resultMsg == "验证码错误!") {
                        alert("验证码错误！");
                        target.$refs.imgCode.click();
                        target.form.rand_code="",
                        this.flag = true;
                    }
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        console.log('error submit!!');
                        die;
                    }
                });
            },
            validate() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.flag = false;
                    } else {
                        this.flag = true;
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                this.peopleInfo.puIcon = file.response;
                var params = {
                    peopleMail: this.peopleInfo.peopleMail,
                    puIcon: this.peopleInfo.puIcon,
                }
                ms.people.user.update(params, function (returnJson) {
                    //更新用户信息
                    if (returnJson.result) {
                        alert("头像修改成功");
                        location.reload();
                    } else {
                        alert(returnJson.resultMsg);
                    }
                });
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },


        mounted: function () {
            //获取个人信息
            var target = this;
            ms.people.user.info(function (returnJson) {
                target.peopleInfo = returnJson;
            })
        }
    })
</script>
<style type="text/css">
    #code {
        position: absolute;
        right: -150px;
        top: 0;
        height: 40px;
    }

    #code>.login-code-img {
        height: 40px;
    }

    #code>div {
        font-size: 15px;
        display: inline-block;
        vertical-align: top;
    }

    #code>div>span {
        display: block;
        line-height: 1.4;
    }

    #code>div>.img-code {
        cursor: pointer;
        color: #00A5FF;
    }
    .avatar-uploader .el-upload {
        border: none !important;
        cursor: pointer;
        position: absolute;
        z-index: 100;
        width: 100px;
        height: 100px;
        padding: 0 !important;
        left: 29%;
        top: calc(50% - 10px);
        transform: translateY(-50%);
    }

    .ms-content-left-info {
        position: relative;
    }
</style>